<!-- 商品抢购区组件 -->
<template>
  <div class="purchase">
    <section class="commodity">
      <div class="bg-img">
        <img src="@/assets/image/01.jpeg" alt="" />
      </div>
      <div class="comm-list">
        <div class="swiper-commodity swcom">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="list1 in purlistArr1"
              :key="list1.goods_id"
            >
              <div class="goods-top">
                <div class="top-img">
                  <img :src="list1.goods_thumb" alt="" />
                  <img
                    :src="list1.goods_label_suspension.formated_label_image"
                    alt=""
                  />
                </div>
              </div>
              <div class="goods-bom">
                <div class="bom-name" v-text="list1.title"></div>
                <div class="bom-price">
                  <div v-text="list1.shop_price_formated"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="commodity">
      <div class="bg-img">
        <img src="@/assets/image/02.jpeg" alt="" />
      </div>
      <div class="comm-list">
        <div class="swiper-commodity swcom" id="swcom">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="list2 in purlistArr2"
              :key="list2.goods_id"
            >
              <div class="swiper-slide">
                <div class="goods-top">
                  <div class="top-img">
                    <img :src="list2.goods_thumb" alt="" />
                    <img
                      :src="list2.goods_label_suspension.formated_label_image"
                      alt=""
                    />
                  </div>
                </div>
                <div class="goods-bom">
                  <div class="bom-name" v-text="list2.title"></div>
                  <div class="bom-price">
                    <div v-text="list2.shop_price_formated"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="commcostume">
      <div class="bg-img">
        <img src="@/assets/image/03.jpeg" alt="" />
      </div>
      <div class="comm-list">
        <div class="costume" id="costume">
          <ul>
            <li v-for="list3 in purlistArr3" :key="list3.goods_id">
              <div class="goods-top">
                <div class="top-img">
                  <img :src="list3.goods_thumb" alt="" />
                  <img
                    :src="list3.goods_label_suspension.formated_label_image"
                    alt=""
                  />
                </div>
              </div>
              <div class="goods-bom">
                <div class="bom-name" v-text="list3.title"></div>
                <div class="bom-price">
                  <div v-text="list3.shop_price_formated"></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section class="commcostume luxury">
      <div class="bg-img">
        <img src="@/assets/image/04.jpeg" alt="" />
      </div>
      <div class="comm-list">
        <div class="costume" id="costumes">
          <ul>
            <li v-for="list4 in purlistArr4" :key="list4.goods_id">
              <div class="goods-top">
                <div class="top-img">
                  <img :src="list4.goods_thumb" alt="" />
                  <img
                    :src="list4.goods_label_suspension.formated_label_image"
                    alt=""
                  />
                </div>
              </div>
              <div class="goods-bom">
                <div class="bom-name" v-text="list4.title"></div>
                <div class="bom-price">
                  <div v-text="list4.shop_price_formated"></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Ajax from "@/api/Ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      purlistArr1: [],
      purlistArr2: [],
      purlistArr3: [],
      purlistArr4: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async getpurlist1() {
      let result = await Ajax(
        "/api/visual/checked",
        {
          goods_id: [1221, 1220, 1223, 1222, 1219],
        },
        "post"
      );
      this.purlistArr1 = result.data;
    },
    async getpurlist2() {
      let result = await Ajax(
        "/api/visual/checked",
        {
          goods_id: [1200, 1198, 1197, 1195, 1201, 1199],
        },
        "post"
      );
      this.purlistArr2 = result.data;
    },
    async getpurlist3() {
      let result = await Ajax(
        "/api/visual/checked",
        {
          goods_id: [1164, 1159, 1162, 1166, 1167, 1168, 863],
        },
        "post"
      );
      this.purlistArr3 = result.data;
    },
    async getpurlist4() {
      let result = await Ajax(
        "/api/visual/checked",
        {
          goods_id: [1218, 1217, 1215, 1214, 1212, 1213],
        },
        "post"
      );
      this.purlistArr4 = result.data;
    },
  },
  mounted() {
    this.getpurlist1();
    this.getpurlist2();
    this.getpurlist3();
    this.getpurlist4();
  },
};
</script>
<style lang="less">
.commodity {
  width: 96%;
  margin: 1rem auto 0;
  position: relative;

  .bg-img {
    img {
      border-radius: 1rem;
      width: 100%;
    }
  }

  .comm-list {
    .swcom,
    .swcom1 {
      padding: 0 0 0 0.3rem;
      overflow-x: auto;
      margin-top: -20%;
      display: flex;

      .swiper-wrapper {
        display: flex;
        .swiper-slide {
          width: 12rem;
          display: inline-block;
          margin-right: 1.3%;
          background-color: #fff;
          overflow: hidden;
          border-radius: 1rem;

          .goods-top {
            position: relative;
            display: flex;
            .top-img {
              width: 12rem;
              position: relative;
              padding-top: 100%;
              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
              }
              img:not([src]) {
                opacity: 0;
              }
            }
          }

          .goods-bom {
            display: flex;
            flex-direction: column;
            padding: 1rem 0.8rem;

            .bom-name {
              font-size: 13px;
              color: #000;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
            }

            .bom-price {
              display: flex;
              font-size: 15px;
              font-weight: 700;
              color: rgb(242, 14, 40);

              img {
                width: 1.2rem;
                height: 1.2rem;
                margin: 0 0.5rem 0 0;
                vertical-align: bottom;
              }
            }
          }
        }
      }
    }
  }
}
.commcostume {
  background-color: rgb(204, 183, 161);
  margin: 0.5rem 0.8rem 0;
  border-radius: 1rem;
  padding: 0 0 1rem;
  width: 96%;
  position: relative;

  .bg-img {
    img {
      border-radius: 1rem;
      width: 100%;
    }
  }

  .comm-list {
    .costume {
      overflow: hidden;
      margin-top: -20%;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          width: 31%;
          display: inline-block;
          margin-right: 1.3%;
          margin-bottom: 2%;
          background-color: #fff;
          overflow: hidden;
          border-radius: 1rem;

          &:nth-child(3n + 1) {
            margin-left: 2.3%;
          }

          &:nth-child(3n) {
            margin-right: 0;
          }

          .goods-top {
            position: relative;
            display: flex;
            .top-img {
              width: 12rem;
              position: relative;
              padding-top: 100%;
              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
              }
              img:not([src]) {
                opacity: 0;
              }
            }
          }

          .goods-bom {
            display: flex;
            flex-direction: column;
            padding: 1rem 0.8rem;

            .bom-name {
              font-size: 13px;
              color: #000;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
            }

            .bom-price {
              display: flex;
              font-size: 15px;
              font-weight: 700;
              color: rgb(242, 14, 40);

              img {
                width: 1.2rem;
                height: 1.2rem;
                margin: 0 0.5rem 0 0;
                vertical-align: bottom;
              }
            }
          }
        }
      }
    }
  }
}
.luxury {
  background-color: rgb(44, 77, 105);
  margin: 0.5rem 0.8rem 0;
  border-radius: 1rem;
  padding: 0 0 1rem;

  .comm-list {
    .costume {
      padding: 0;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          margin-bottom: 2%;

          &:nth-child(3n + 1) {
            margin-left: 2.3%;
          }

          .goods-bom {
            padding: 1rem 0.8rem;
          }
        }
      }
    }
  }
}
</style>